<!DOCTYPE html>
<html>
<head>
<title>Widget Emulator</title>
<style type="text/css" media="all">
@import "emulator_files/css/all.css";

@import "emulator_files/css/scroll.css";
</style>
<script type="text/javascript" src="emulator_files/js/media.js"></script>
<script type="text/javascript" src="emulator_files/js/prototypes.js"></script>
<script type="text/javascript" src="emulator_files/js/emulator.js"></script>
<script type="text/javascript" src="emulator_files/js/json.js"></script>
<script type="text/javascript" src="emulator_files/js/preference.js"></script>
<script type="text/javascript" src="emulator_files/js/UI.js"></script>
<script type="text/javascript" src="emulator_files/js/scrollbars.js"></script>
<script type="text/javascript" src="emulator_files/js/Base64Encoder.js"></script>
<script type="text/javascript">

var g_helpURL = 'http://dev.opera.com/articles/view/widget-emulator/';

/*
 PANEL DEVICE BUTTONS
 The fields for each entry are:
 Unique-id, Name, media-type, width, height, framerate, connection-speed (in bits), storage-size (in bytes), dockWidth, dockHeight
 
*/

var g_devicesDefault = [ // these can be re-added in the ui if all devices are deleted
  ['0', 'Desktop',              'screen',  640, 480,   0, 256*1024, 2097152,   0,  0], // 2MB storage

  ['1', 'Basic Landscape Mobile','handheld',208, 176, 100,  16*1024, 20480,   280, 80], // 20KB storage
  ['2', 'Basic Portrait Mobile', 'handheld',176, 208,  50,  32*1024, 20480,    48, 48], // 20KB storage
  ['3', 'QVGA Landscape Mobile','handheld',320, 240, 100,  16*1024, 20480,   280, 80], // 20KB storage
  ['4', 'QVGA Portrait Mobile', 'handheld',240, 320,  50,  32*1024, 20480,    48, 48], // 20KB storage
  ['5', 'Double Landscape Mobile','handheld',416, 352, 100,  16*1024, 20480,   280, 80], // 20KB storage
  ['6', 'Double Portrait Mobile', 'handheld',352, 416,  50,  32*1024, 20480,    48, 48], // 20KB storage
  ['7', 'TV',                   'tv',      800, 480,   0,  64*1024, 204800,    0,  0] // 200KB storage
];

var g_devices = widget.preferenceForKey('devices') || g_devicesDefault.concat();

window.onload = function()
{
   if (window.widget) 
   {
      emulator.init();
      
      window.config = {
        emulateConnection: widget.preferenceForKey('config-emulateConnection') =='1', 
        //emulateFramerate:  widget.preferenceForKey('config-emulateFramerate' ) =='1',
        showOutline:       widget.preferenceForKey('config-showOutline'      ) !='0' // on by default
      };

      
      g('config-emulateConnection').checked  = window.config.emulateConnection;
      //g('config-emulateFramerate' ).checked  = window.config.emulateFramerate;
      g('config-showOutline'      ).checked  = window.config.showOutline;
      
      g('config-emulateConnection').onchange = function()
      {
        window.config.emulateConnection = this.checked;
        widget.setPreferenceForKey(this.checked?'1':'0','config-emulateConnection');
      };
      /*g('config-emulateFramerate').onchange = function()
      {
        window.config.emulateFramerate = this.checked;
        widget.setPreferenceForKey(this.checked?'1':'0','config-emulateFramerate');
      };*/
      
      g('config-showOutline').onchange = function()
      {
        window.config.showOutline = this.checked;
        widget.setPreferenceForKey(this.checked?'1':'0','config-showOutline');
        applyOutline();
      };
      
      function applyOutline()
      {
        var frameWrapper = g('frameWrapper');
        if (frameWrapper)
        {
          if (window.config.showOutline)
          {
            frameWrapper.addClass('showOutline');
          }
          else
          {
            frameWrapper.removeClass('showOutline');
          }
        }
      }
      applyOutline();
    
      window.ui = new window.ui();
      window.scrollbars = new window.scrollbars();

      /* these two values should come from the config.xml file of the widget */
      ui.device.widget.defaultWidth = 460;
      ui.device.widget.defaultHeight = 360;
      
      ui.generateDevices();
  }
  else
  {
    document.body.innerHTML = '\
      <div style="font-size:14pt;margin:10px;">\
        <p style="font-weight: 700;">The Widget Emulator<\/p>\
        <p>This document is inteded to be run as a widget,\
        drag the file config.xml into the Opera window to continue.\
        <p>Visit the online <a href="'+g_helpURL+'">help<\/a>\
        for more information.<\/p>\
      <\/div>\
      ';
  }
}
</script>
<body>
<div id="panel">
<div id="panel-buttons">
<button type="button" id="help" class="tooltip" tooltip="Help"></button>
<button type="button" id="config" class="tooltip" tooltip="Config"></button>
<button type="button" id="close" class="tooltip" tooltip="Close"></button>
</div>
<div id="panel-main">
<p id="panel-devices-none">There are no device profiles saved. You
can either
<button type="button" id="panel-devices-restore">Restore the
default devices</button>
or create a custom one by clicking the 'New' button below.</p>
<div id="panel-devices">
<div id="panel-status" class="box">
<button type="button" id="status-edit" class="tooltip"
	tooltip="Edit Device"><span>Edit</span></button>
<ul>
	<li>Media: "<span id="status-media"></span>"<br>
	<li>Screen: <span id="status-screen"></span><br>
	<li>Connection: <span id="status-connection"></span><br>
	<li>Storage space: <span id="status-storage"></span><br>
	<li>Dock: <span id="status-dock"></span>
</ul>
</div>
</div>

<div id="panel-controls">
<button type="button" id="device-new" class="tooltip"
	tooltip="Add new device"><span>New</span></button>
<button type="button" id="device-delete" disabled class="tooltip"
	tooltip="Delete device"><span>Delete</span></button>
</div>

<div id="panel-new-container">
<form id="panel-custom" class="box" action="#"><input
	type="hidden" id="custom-id" value=""> <label> <span>Name:</span>
<input type="text" id="custom-name" maxlength="21"> </label> <label>
<span>Media:</span> <select id="custom-media">
	<option value="screen">Screen
	<option value="handheld">Handheld
	<option value="tv">TV
</select> </label> <label> <span>Screen:</span> <input class="short"
	id="custom-screen-x" type="text" maxlength="3"> x <input
	class="short" id="custom-screen-y" type="text" maxlength="3"> </label>
<!--<label>
          <span>Frame rate:</span>
          <select id="custom-framerate">
            <option value="0">Normal
            <option value="50">Slow
            <option value="100">Slower
          </select>
        </label>--> <label> <span>Connection:</span> <select
	id="custom-connection">
	<option value="-1">Default
	<option value="262144">256 Kbps
	<option value="65536">64 Kbps
	<option value="32768">32 Kbps
	<option value="16384">16 Kbps
</select> </label> <label> <span>Storage:</span> <select id="custom-storage">
	<option value="2097152">2 MB
	<option value="204800">200 KB
	<option value="20480">20 KB
</select> </label> <label class="check"> <input id="custom-dock" type="checkbox">
Allow dock </label> <label> <span>Dock size:</span> <input class="short"
	id="custom-dock-x" type="text" maxlength="3"> x <input
	class="short" id="custom-dock-y" type="text" maxlength="3"> </label> <label>
<span></span>
<button type="submit" id="custom-ok">Ok</button>
<button type="button" id="custom-cancel">Cancel</button>
</label></form>
</div>
</div>
<div id="panel-config">
<div id="config-version">Version <span>0.9</span></div>
<label> <input type="checkbox" id="config-emulateConnection">
<span>Emulate connection speed</span> </label> <!--<label>
      <input type="checkbox" id="config-emulateFramerate">
      <span>Emulate frame rate</span>
    </label>--> <label> <input type="checkbox"
	id="config-showOutline"> <span>Show window outline</span> </label></div>
</div>

<div id="info">
<div>
<div id="info-program"><img id="info-icon"
	src="img/widget-icon.png" width="16" height="16"> <span
	id="info-title"></span>
<button type="button" id="info-close" class="tooltip"
	tooltip="Close your widget"></button>
<button type="button" id="info-reload" class="tooltip"
	tooltip="Reload your widget"></button>
<button type="button" id="info-dock" class="tooltip"
	tooltip="Dock your widget"></button>
</div>
<div id="info-stats"></div>
</div>
</div>

<div id="device">
<div id="screen">
<div id="frame">
<div id="frame-top-left"></div>
<div id="frame-top-mid"></div>
<div id="frame-top-right"></div>
<div id="frame-mid-left"></div>
<div id="frame-mid-right"></div>
<div id="frame-bot-left"></div>
<div id="frame-bot-mid"></div>
<div id="frame-bot-right"></div>
</div>
<div id="desktop">
<div id="desktop-error">
<div id="desktop-error-script">
<h3>An error has occured</h3>
<ol>
	<li>Please open /widget/index.html
	<li>Add following code line <em>first</em> in the <code>head</code>:
	<input type="text" onclick="this.select()" readonly="readonly"
		value="&lt;script type=&quot;text/javascript&quot;&gt;if(parent.emulator)parent.emulator.begin(window);&lt;/script&gt;">
</ol>
</div>
<div id="desktop-error-config">
<h3>Failed to load the widget</h3>
<p>The file <code>widget/config.xml</code> could not be opened.</p>
<p>A valid widget must be placed in the <code>widget/</code>
subdirectory of the emulator</p>
</div>
<div id="desktop-error-index">
<h3>Failed to load the widget</h3>
<p>The file <code>widget/index.html</code> could not be opened.</p>
<p>A valid widget must be placed in the <code>widget/</code>
subdirectory of the emulator</p>
</div>
<button type="button" id="desktop-error-launch">Reload Widget</button>
</div>
<div id="desktop-icons">
<button type="button" id="icons-launchwidget"></button>
</div>
<div id="desktop-colours">
<button type="button" style="background-color: #A85151;"
	id="desktop-colours-red"></button>
<button type="button" style="background-color: #697FA7;"
	id="desktop-colours-blue"></button>
<button type="button" style="background-color: #69A7A6;"
	id="desktop-colours-aqua"></button>
<button type="button" style="background-color: #587D54;"
	id="desktop-colours-green"></button>
<button type="button" style="background-color: #BEB060;"
	id="desktop-colours-yellow"></button>

<button type="button" style="background-color: #FFFFFF;"
	id="desktop-colours-white"></button>
<button type="button" style="background-color: #888888;"
	id="desktop-colours-grey"></button>
<button type="button" style="background-color: #000000;"
	id="desktop-colours-black"></button>
</div>
</div>
<div id="screen-content">
<div id="frameWrapper"><!-- example HTML
        <object id="frameObject" data="widget/index.html" classid="http://www.opera.com/era" width="800" height="600">
            <param name="rm" value="0">
            <param name="mfp" value="0">
        </object>
        --></div>
</div>
<div id="dockBlocker"></div>
<!-- to overlay the iframe when in docked mode (stops clicks from being caught by dock) -->
<div id="scroll">
<div id="scroll-v">
<div id="scroll-up"></div>
<div id="scroll-v-bar"></div>
<div id="scroll-down"></div>
<div id="scroll-corner"></div>
</div>
<div id="scroll-h">
<div id="scroll-left"></div>
<div id="scroll-h-bar"></div>
<div id="scroll-right"></div>
</div>
</div>
<div id="notifier"><input type="button" id="notifier-text"
	disabled> <input type="button" id="notifier-close" disabled>
</div>
<div id="bar"></div>
<div id="fuzz"></div>
<div id="screen-blocker"></div>
</div>
</div>

<div id="dialogue"><!-- Example markup:
    <form>
      <div>
      Some text
      </div>
      <fieldset>
        <input type="submit" value="Ok">
        <input type="button" value="Cancel">
      </fieldset>
    </form>
  --></div>

</body>
</html>
